<template>
	<view class="">
		<view class="top_add_card">
			<view class="add_tit">
				<view class="huming">户名</view>
				<input type="text" v-model="bank_user_name" class="ipt_hm" placeholder="请输入户名">
			</view>
		</view>
		<view class="top_add_card">
			<view class="add_tit">
				<view class="huming">银行名称</view>
				<input type="text" v-model="bank_name" class="ipt_hm" placeholder="请输入户名">
			</view>
		</view>
		<view class="top_add_card">
			<view class="add_tit">
				<view class="huming">账号</view>
				<input type="text" v-model="bank_card" class="ipt_hm" placeholder="请输入账号">
			</view>
		</view>
		<view class="top_add_card">
			<view class="add_tit">
				<view class="huming">开户行</view>
				<input type="text" v-model="bank_region" class="ipt_hm" placeholder="请输入地址">
			</view>
		</view>
		<view class="top_add_card">
			<view class="add_tit">
				<view class="huming">手机号</view>
				<view class="input_flex">
					<input type="text" v-model="bank_user_phone" class="ipt_phone" placeholder="请输入手机号(可选)">
					<image class="dianhua" src="../static/phone.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="btn-baocun" @click="baocun">保存</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bank_name: '',
				bank_card: '',
				bank_region: '',
				bank_user_name: '',
				bank_user_phone: '',
				card_id: '',
			}
		},
		onLoad(option) {
			this.card_id = option.id
			if (option.id) {
				uni.setNavigationBarTitle({
					title: '修改银行卡'
				})
				this.getCardlist()
			}
		},
		methods: {
			// 银行卡信息回显
			getCardlist() {
				this.$H.post('v2/store/user/bank/edit', {
					bank_id: this.card_id
				}).then(res => {
					console.log("回显成功", res);
					this.bank_name = res.data.bank_name
					this.bank_card = res.data.bank_card
					this.bank_region = res.data.bank_region
					this.bank_user_name = res.data.bank_user_name
					this.bank_user_phone = res.data.bank_user_phone
				})
			},
			baocun() {
				if (this.card_id) {
					this.$H.post('v2/store/user/bank/update', {
						bank_id: this.card_id,
						bank_name: this.bank_name,
						bank_card: this.bank_card,
						bank_region: this.bank_region,
						bank_user_name: this.bank_user_name,
						bank_user_phone: this.bank_user_phone
					}).then(res => {
						console.log("修改成功", res);
						if (res.status.succeed == 1) {
							uni.showToast({
								title: '修改成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						} else {
							uni.showToast({
								title: res.status.error_desc,
								icon: 'none'
							})
						}
					})
				} else {
					this.$H.post('v2/store/user/bank/add', {
						bank_name: this.bank_name,
						bank_card: this.bank_card,
						bank_region: this.bank_region,
						bank_user_name: this.bank_user_name,
						bank_user_phone: this.bank_user_phone
					}).then(res => {
						if (res.status.succeed == 1) {
							console.log("添加成功", res);
							uni.showToast({
								title: '保存成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						} else {
							uni.showToast({
								title: res.status.error_desc,
								icon: 'none'
							})
						}
					})
				}
			},
		}
	}
</script>

<style>
	.btn-baocun {
		width: 600rpx;
		color: #fff;
		text-align: center;
		padding: 20rpx 0 20rpx 0;
		font-weight: 600;
		background-color: #fd5822;
		border-radius: 40rpx;
		margin: 100rpx auto;
	}

	.input_flex {
		display: flex;
		align-items: center;
	}

	.ipt_phone {
		width: 500rpx;
		font-size: 28rpx;
		color: #000;
	}

	.dianhua {
		width: 40rpx;
		display: block;
	}

	.huming {
		font-size: 28rpx;
		color: #444;
		width: 150rpx;
	}

	.ipt_hm {
		width: 500rpx;
		font-size: 28rpx;
		color: #000;
	}

	.add_tit {
		width: 690rpx;
		margin: auto;
		display: flex;
		align-items: center;
	}

	.top_add_card {
		width: 750rpx;
		height: 80rpx;
		background-color: #fff;
		margin-top: 10rpx;
		display: flex;
		align-items: center;
	}
</style>